<template>
	<div class="screen7-module3-content">
		<div class="count-view">
			<div class="count-column">
				<div class="title">计划</div>
				<div class="number">{{countNumber.plan}}</div>
			</div>
			<div class="count-column">
				<div class="title">完成</div>
				<div class="number">{{countNumber.complete}}</div>
			</div>
			<div class="count-column">
				<div class="title">剩余</div>
				<div class="number">{{countNumber.remainder}}<span v-if="countNumber.prev" class="prev">{{countNumber.prev}}</span></div>
			</div>
		</div>
		<div class="list-view">
			<!-- @@@@@@@@@@@@@@@@@@@@@ -->
			<div class="auto-scroll-view">
				<div class="scroll-header">
					<div 
						:style="{
							width:item.grow?'10px':(item.width?item.width:'auto'),
							flexGrow:item.grow?item.grow:'initial',
							flexShrink:item.grow?'initial':'0',
							justifyContent:item.align?item.align:'flex-start'
						}" 
						v-for="(item,index) in columns" 
						:key="'list-header-cell-'+index">
						{{item.label}}
					</div>
				</div>
				<!-- list body start -->
				<div class="scroll-body">
					<auto-scroll :step-speed="$config.base.screen.screen7.scrollSpeed">	
						<div class="no-data" v-if="list.length===0">暂时没有信息！</div>
						
						<template v-else>
							<div class="scroll-body-row" v-for="(scope,indexA) in list" :key="'scroll-body-row-'+indexA">
								<div 
									:style="{
										width:columnItem.grow?'10px':(columnItem.width?columnItem.width:'auto'),
										flexGrow:columnItem.grow?columnItem.grow:'initial',
										flexShrink:columnItem.grow?'initial':'0',
										justifyContent:columnItem.align?columnItem.align:'flex-start'
									}" 
									v-for="(columnItem,indexB) in columns" 
									:key="'list-body-cell-'+indexB"
								>
									<template v-if="columnItem.type==='index'">{{indexA+1}}</template>
									<div v-if="columnItem.type==='num'" class="ellipsis">
										{{scope['number']}}<template v-if="scope['number']!==scope['passNumber']">/{{scope['passNumber']}}</template>
									</div>
									<div class="ellipsis" v-else>{{scope[columnItem.name]}}</div>
								</div>
							</div>
						</template>
						
					</auto-scroll>	
				</div>
				<!-- list body end -->
			</div>
			<!-- @@@@@@@@@@@@@@@@@@@@@- -->
		</div>
	</div>
</template>

<script setup>
import { ref, inject } from 'vue';
import AutoScroll from '@/components/AutoScroll.vue'

const $config = inject('$config')
const props = defineProps({
	countNumber:{
		type:Object,
		default:function(){
			return {
				plan:0,
				complete:0,
				remainder:0,
				prev:0
			}
		}
	},
	list:{
		type:Array,
		default:function(){
			return []
		}
	}
})

const columns = ref([
	{
		label:'序',
		type:'index',
		width:'2.4em',
		align:'center'
	},
	{
		label:'订单',
		name:'projectCode',
		align:'center',
		grow:1
	},
	{
		label:'数量(件)',
		type:'num',
		width:'5em',
		align:'center'
	}
])
</script>

<style scoped lang="scss">
.screen7-module3-content{
	height: 100%;
	display: flex;
	flex-direction: column;
	.count-view,.list-view{
		box-sizing: border-box;
	}
	.count-view{
		flex-shrink: 0;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: .2em .3em .1em .3em;
		.count-column{
			.title,.number{
				text-align: center;
			}
			.title{
				font-size: .3em;
				color: #ffffff;
				padding-bottom: .4em;
			}
			.number{
				font-size: .42em;
				color: #ffff00;
				.prev{
					font-size: .6em;
				}
			}
		}
	}
	.list-view{
		height: 1px;
		flex-grow: 1;
	}
}
</style>